<template>
  <!-- 横向柱状图 -->
  <div>
    <div>【大区数据信息】</div>
    <div ref="target" class="w-full h-full"></div>
  </div>
</template>

<script setup>
import { onMounted, ref, watch } from "vue";
import * as echarts from "echarts";
const props = defineProps({
  data: {
    type: Object,
    required: true,
  },
});
let myChart = null;
const target = ref(null); // 固定写法获取dom
onMounted(() => {
  myChart = echarts.init(target.value);
  renderChart();
});
const renderChart = () => {
  const options = {
    // X轴展示数据
    xAxis: {
      show: false, // 轴不需要显示
      type: "value", // X轴会作为数据进行展示
      // 最大值 （防止触顶）
      max: (value) => {
        return parseInt(value.max * 1.2); //
      },
    },
    // Y轴展示数据
    yAxis: {
      type: "category",
      data: props.data.regions.map((item) => item.name), // map生成新数组
      inverse: true, // 反转数据
      // 不展示轴线
      axisLine: {
        show: false,
      },
      // 不展示刻度
      axisTick: {
        show: false,
      },
      // 文字颜色
      axisLable: {
        color: "#9eb1c8",
      },
    },
    // echarts 网格绘制的位置，对应 上、右、下、左
    grid: {
      top: 0,
      right: 0,
      bottom: 0,
      left: 0,
      // 计算边距时，包含标签
      containLabel: true,
    },
    // 柱形图核心配置
    series: [
      {
        // 图表类型
        type: "bar",
        // 数据筛选
        data: props.data.regions.map((item) => ({
          name: item.name,
          value: item.value,
        })),
        // 显示背景
        showBackground: true,
        // 背景色
        backgroundStyle: {
          color: "rgba(180, 180, 180, 0.2)",
        },
        // 每个轴的样式
        itemStyle: {
          color: "#479AD3", // 设置柱子的颜色
          barBorderRadius: 5, // 设置柱子的圆角
          shadowColor: "rgba(0, 0, 0, 0.3)", // 设置柱子的阴影颜色
          shadowBlur: 5, // 设置柱子的阴影模糊大小
        },
        // 轴宽度
        barWidth: 12,
        // 轴上的字体
        label: {
          show: true,
          // 设置文字位置为右侧
          position: "right",
          textStyle: {
            // 设置标签文本颜色
            color: "#fff",
          },
        },
      },
    ],
  };
  myChart.setOption(options);
};
watch(
  () => props.data,
  () => {
    renderChart();
  }
);
</script>

<style lang="scss" scoped></style>
